import { UserConfigFn, loadEnv } from 'vite'
// import viteComponents from 'vite-plugin-components'
import legacy from '@vitejs/plugin-legacy'
import vue from '@vitejs/plugin-vue'
import { name } from './package.json'
import eslint from 'vite-plugin-eslint'

const config = {
  envDir: 'config',
}

export default (function ({ mode }) {
  const env = loadEnv(mode, config.envDir)

  return {
    base: env.VITE_BASE_URL,
    plugins: [
      vue(),
      eslint({
        include: ['src/**/*.ts', 'src/**/*.vue'],
        fix: true,
      }),
      // viteComponents({
      //   customComponentResolvers: []
      // }),
      legacy({
        targets: ['defaults'],
      }),
    ],
    envDir: config.envDir,
    test: {
      environment: 'jsdom',
      include: ['test/**/*.{test,spec}.ts'],
    },
    resolve: {
      alias: [
        {
          find: /@\//,
          replacement: '/src/',
        },
      ],
    },
    css: {
      modules: {
        // 强制css modules使用驼峰
        localsConvention: 'camelCaseOnly',
      },
      preprocessorOptions: {
        scss: {
          additionalData: `
            @forward "@/asset/css/common/_config.scss" with ($namespace: "${name}-");
            @use "@/asset/css/common/_var.scss"as *;
          `,
        },
      },
    },
  }
} as UserConfigFn)
